<template>
	<view>
		<!-- <u-subsection :list="list" :current="current" @change='changeCurrent' inactive-color='#FF5D00' active-color='#002238' bg-color='#FF5D00'></u-subsection> -->
		<u-row>
			<u-col span='4'>
				<view>
					<view v-if='current == 0' class='active'>
						未使用
					</view>
					<view v-else class='no-active' @click='changeCurrent(0)'>
						未使用
					</view>
				</view>
			</u-col>
			<u-col span='4'>
				<view>
					<view v-if='current == 1' class='active'>
						已使用
					</view>
					<view v-else class='no-active' @click='changeCurrent(1)'>
						已使用
					</view>
				</view>
			</u-col>
			<u-col span='4'>
				<view>
					<view v-if='current == 2' class='active'>
						已过期
					</view>
					<view v-else class='no-active' @click='changeCurrent(2)'>
						已过期
					</view>
				</view>
			</u-col>
		</u-row>
		<view v-if='coupons && coupons.length > 0'>
			<view v-for='item in coupons'>
				<view class='coupon' >
					<u-row v-if='current == 0'>
						<u-col span='10'>
							<view>
								<view class='name'>{{item.coupon.__toString}}</view>
								<view class='date-time'>
									{{$u.timeFormat(new Date(item.expiredTime), 'yyyy年mm月dd日 hh:MM:ss')}}到期
								</view>
							</view>
						</u-col>
						<u-col span='2'>
							<view @click='showCode(item)'>
								<view class='code'>点击</view>
								<view class='code'>核销</view>
							</view>
						</u-col>
					</u-row>
					<u-row v-if='current == 1'>
						<u-col span='12'>
							<view>
								<view class='name'>{{item.coupon.__toString}}</view>
								<view class='date-time'>
									{{$u.timeFormat(new Date(item.verifiedTime), 'yyyy年mm月dd日 hh:MM:ss')}}
									【{{item.verifyStore.__toString}}】已核销
								</view>
							</view>
						</u-col>
					</u-row>
					<u-row v-if='current == 2'>
						<u-col span='12'>
							<view>
								<view class='name'>{{item.coupon.__toString}}</view>
								<view class='date-time'>
									{{$u.timeFormat(new Date(item.expiredTime), 'yyyy年mm月dd日 hh:MM:ss')}}
									已过期
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view v-else style='padding-top:30vh'>
			<u-empty mode="coupon" text='暂无优惠券'>
			</u-empty>
		</view>
		<u-popup v-if='choosedCoupon != ""' :show="show" mode='top' @close='show = false'>
			<view style='height: 60vh;'>
				<text style='text-align: center;color:#606266;font-size:18px;padding:10px;'>《{{choosedCoupon.coupon.__toString}}》</text>
				<view style='margin: auto;padding:10px;'>
					<img :src='src' style='width:300px;height:300px' />
				</view>
				<view style='color: #909399;text-align: center;'>
					请出示核销码给门店人员进行核销
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['未使用', '已使用', '已过期'],
				current: 0,
				page: 1,
				limit: 10,
				coupons: [],
				choosedCoupon: '',
				show: false,
				src: ''
			}
		},
		onLoad() {
			this.getCoupon()
		},
		methods: {
			changeCurrent(e) {
				this.current = e
				this.coupon = []
				this.page = 1
				this.getCoupon()
			},
			getCoupon() {
				uni.showLoading()
				let filter = `entity.getIsUsed() == false && entity.getExpiredTime() > datetime.get('now')`
				if (this.current == 1) {
					filter = `entity.getIsUsed() == true`
				}
				if (this.current == 2) {
					filter = `entity.getIsUsed() == false && entity.getExpiredTime() < datetime.get('now')`
				}
				console.log(filter)
				this.request.get(`api/user-coupons`,{
					'@filter': filter
				}).then((res) => {
					uni.hideLoading()
					console.log('coupon', res.data)
					this.coupons = res.data
				})
			},
			showCode(item){
				this.choosedCoupon = item
				this.src = `${getApp().globalData.apiBase}qr-code/mini-program?page=pages/index/coupon-use&scene=${item.id}`
				this.show = true
			}
		}
	}
</script>

<style>
	.active {
		background-color: #FF5D00;
		color: #FFF;
		text-align: center;
		padding: 5px 0px;
		border: solid #FF5D00 1px;
	}

	.no-active {
		background-color: #f3f3f3;
		color: #FF5D00;
		text-align: center;
		padding: 5px 0px;
		border: solid #FF5D00 1px;
	}

	.coupon {
		margin: 5px;
		border-radius: 5px;
		padding: 10px;
		background-color: #FF5D00;
	}

	.name {
		color: #fff;
		font-size: 25px;
	}

	.date-time {
		color: #f3f3f3;
		font-size: 14px;
	}

	.code {
		color: #fff;
		text-align: center;
	}
</style>